<html>
<head>
<title>
</title>
<link rel="stylesheet" href="style.css">

<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="data/voyages.js"></script>
<script src="map_style.js"></script>

<script>
var map;
var heatmap;
var heatmapData = new google.maps.MVCArray();
var points = [];
var intervalId;

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true,
    styles: style
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('controls'));

  for (var i = 0; i < data.length; i++) {
    for (var j = 0; j < data[i].path.length; j++) {
      points.push(data[i].path[j]);
    }
  }

  points.sort(function(a, b) {
    return a.time.localeCompare(b.time);
  });

  var gradient = [
    'rgba(255, 0, 0, 0)',
    'rgba(255, 128, 128, 1)',
    'rgba(255, 255, 0, 1)',
    'rgba(255, 255, 255, 1)'
  ];

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    dissipating: false,
    radius: 2,
    opacity: .9,
    gradient: gradient,
    maxIntensity: 10
  });
  heatmap.setMap(map);

  document.getElementById('year-slider').min = 0;
  document.getElementById('year-slider').max = points.length - 1;

  intervalId = setInterval(updateHeatmap, 1);
}

var playIndex = 0;

function updateHeatmap() {
  heatmapData.push(new google.maps.LatLng(points[playIndex].lat, points[playIndex].lng));
  document.getElementById('year-slider').value = playIndex;
  document.getElementById('year-slider-label').textContent = points[playIndex].time.substring(0, 4);
  playIndex++;
}

/* Convenience method for updating data via console. */
function setSliderValue(value) {
  clearInterval(intervalId);
  heatmapData.clear();

  document.getElementById('year-slider').value = value;
  playIndex = value;

  intervalId = setInterval(updateHeatmap, 1);
}
</script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
  <div id="controls" class="control">
    <label id="year-slider-label" class="slider-label" for="year-slider">1750</label>
    <span class="slider-wrap">
      <input type="range" id="year-slider" class="slider" min="0" max="0" value="0" readonly="readonly" />
    </span>
  </div>
</body>
</html>
